<template>
  <v-card>
    <v-card-title class="align-start">
      <span>热门机构</span>

      <v-spacer></v-spacer>

        <span @click="gotoRank" class="text-xs text--disabled cursor-pointer">查看全部</span>
    </v-card-title>

    <v-card-text>
      <v-list class="pb-0">
        <v-list-item v-for="(data, index) in trendContent" :key="data.name" :class="`d-flex align-center px-0 ${index > 0 ? 'mt-4' : ''}`">
          <v-avatar :color="data.color" size="55" :class="`${data.color} white--text font-weight-medium me-3`">
            <span class="text-base">{{ data.abbr }}</span>
          </v-avatar>

          <div class="align-center flex-grow-1 flex-wrap">
            <div class="me-2">
              <div class="font-weight-semibold">
                <span class="text--primary text-base me-1">{{ data.name }}</span>
              </div>
            </div>

            <v-spacer></v-spacer>

            <div>
              <span class="font-weight-semibold" style="color:orange">
                {{ data.amount }}
              </span>
              <span class="text-xs">papers</span>
            </div>
          </div>
        </v-list-item>
      </v-list>
    </v-card-text>
  </v-card>
</template>

<script>
import { mdiDotsVertical, mdiChevronUp, mdiChevronDown } from "@mdi/js";
export default {
  setup() {
    const trendContent = [
      {
        abbr: "IBM",
        amount: 2537,
        name: "IBM",
        color: "primary",
      },
      {
        abbr: "MS",
        amount: 2347,
        name: "MicroSoft",
        color: "success",
      },
      {
        abbr: "CMU",
        amount: 1822,
        name: "Carnegie Mellon University",
        color: "error",
      },
    ];
    return {
      trendContent,
      icons: {
        mdiDotsVertical,
        mdiChevronUp,
        mdiChevronDown,
      },
    };
  },
  methods: {
      gotoRank(){
          this.$router.push("/rank");
      }
  },
};
</script>
